<template>
  <div class="console-message-config-wrapper">
    <a-row class="head">
      <a-icon type="left" @click="$router.push('/thirdService/smsTemplate')" />
      <a-col class="title">
        <strong>配置发送场景</strong>
      </a-col>
    </a-row>
    <div class="message-config-content-wrapper">
      <div class="message-config-left-wrapper">
        <div class="config-left-title">发送场景</div>
        <div>
          <a-checkbox-group v-model="selectedKeys">
            <a-row>
              <a-col :span="24" v-for="item in options" :key="item.scene" class="config-checkbox-item">
                <a-checkbox :value="item.scene">
                  {{ item.description }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
      </div>
      <div class="message-config-right-wrapper">
        <div style="margin-bottom: 24px">
          <div>验证码模板</div>
          <div>模板内容: 【xxx】您的验证码为：，该验证码10分钟内有效，请勿泄露于他人。</div>
        </div>
        <a-table :columns="columns" :data-source="sceneData" :row-key="(d) => d.description" :pagination="false">
          <span slot="timeDiff" slot-scope="text, record">
            <div>
              <a-input-number @change="handleTime($event, record.index)" style="width: 150px" :value="record.timeDiff" :min="0" />
              <span style="margin-left: 10px">秒</span>
            </div>
          </span>
          <span slot="cost" slot-scope="text, record">
            <div>
              <a-input-number @change="handleCost($event, record.index)" style="width: 150px" :value="record.cost" :min="0" />
              <span style="margin-left: 10px">元/条</span>
            </div>
          </span>
        </a-table>
      </div>
    </div>
    <div class="message-config-bottom-wrapper">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleSubmit" style="margin-left: 12px"> 提交 </a-button>
    </div>
  </div>
</template>

<script>
import { stringify } from "qs";
const columns = [
  {
    title: "发送场景",
    dataIndex: "description",
    key: "description"
  },
  {
    title: "间隔时间",
    dataIndex: "timeDiff",
    key: "timeDiff",
    scopedSlots: { customRender: "timeDiff" }
  },
  {
    title: "价格",
    dataIndex: "cost",
    key: "cost",
    scopedSlots: { customRender: "cost" }
  }
];
import { getScene, addConfig, getConfig } from "./api";
export default {
  data() {
    return {
      options: [],
      selectedKeys: [],
      sceneData: [],
      columns,
      templateId: ""
    };
  },

  created() {
    this.templateId = this.$route.query.templateId;
    this.init();
  },

  watch: {
    selectedKeys: {
      handler(val) {
        this.sceneData = [];
        val.forEach((item, index) => {
          this.options.forEach((item2, index2) => {
            if (item2.scene === item) {
              this.sceneData.push({
                description: item2.description,
                cost: item2.cost,
                timeDiff: item2.timeDiff,
                isDefault: false,
                scene: item2.scene,
                templateId: this.templateId,
                index
              });
            }
          });
        });
      },
      immediate: true
    }
  },
  methods: {
    init() {
      getScene({ isDefault: false })
        .then((res) => {
          this.options = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
      const dataConfig = {
        isDefault: false,
        templateId: this.templateId
      };
      getConfig(dataConfig)
        .then((res) => {
          this.selectedKeys = [];
          res.data.forEach((item, index) => {
            this.options.forEach((item2, index2) => {
              if (item2.scene === item.scene) {
                item2.cost = item.cost;
                item2.timeDiff = item.timeDiff;
              }
            });
            this.selectedKeys.push(item.scene);
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleCancel() {
      this.$router.push("/thirdService/smsTemplate");
    },
    handleSubmit() {
      const data = {
        smsSiteAddDTOList: this.sceneData
      };
      addConfig(data)
        .then((res) => {
          this.$router.push("/thirdService/smsTemplate");
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleTime($event, index) {
      const temp = JSON.parse(JSON.stringify(this.sceneData));
      temp[index].timeDiff = $event;
      this.sceneData = temp;
    },
    handleCost($event, index) {
      const temp = JSON.parse(JSON.stringify(this.sceneData));
      temp[index].cost = $event;
      this.sceneData = temp;
    }
  }
};
</script>

<style scoped lang="scss">
.console-message-config-wrapper {
  .message-config-content-wrapper {
    display: flex;
    padding: 12px;
    margin-top: 24px;
    height: 70vh;
    border-bottom: 1px solid #e8e8e8;
    .config-left-title {
      font-size: 16px;
      color: #272727;
      padding: 12px;
      border-bottom: 1px solid #e8e8e8;
    }
    .message-config-left-wrapper {
      width: 20%;
      border-right: 1px solid #e8e8e8;
    }
    .message-config-right-wrapper {
      width: 78%;
      padding-left: 2%;
    }
    .config-checkbox-item {
      margin: 10px 0;
    }
  }
  .message-config-bottom-wrapper {
    margin: 12px 24px 0 0;
    padding-bottom: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .head {
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #d8d8d8;
      font-size: 24px;
      margin-top: 18px;
    }

    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
